<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$().ready(function(){
				$(".s1").click(function(){
					$(".s4,.s5,.s6").fadeIn(2000);
					$(".s4,.s5,.s6").css("background-color","red")
				});
				$(".s2").click(function(){
					$(".s4,.s5,.s6").css("border-radius","25px");
					$(".s4,.s5,.s6").fadeOut(2000);
				});
				$(".s3").click(function(){
					$(".s4,.s5,.s6").fadeToggle(2000);
					$(".s1,.s2,.s3").fadeTo(2000,0.6,function(){
					});
				});
				
				$(".s4").click(function(){
					$(".s1,.s2,.s3").slideUp("slow");
				});
				
				$(".s5").click(function(){
					$(".s1,.s2,.s3").slideDown("slow");
				});
				$(".s6").click(function(){
					$(".s1,.s2,.s3").slideToggle(3000);
				});
				
			});
		</script>
		<style>
			.div1{
				width: 340px;
				height: 340px;
				background-color: #00FFFF;
			}
			.s1,.s2,.s3{
				width: 100px;
				height: 100px;
				background-color: #FFFF00;
				margin-left: 10px;                    
				margin-top: 10px;
				float: left;
			}
			.s4,.s5,.s6{
				width: 100px;
				height: 100px;
				background-color: #FFFF00;
				float: left;
				display: none;
				margin: 10px auto auto 10px;
			}
			.s7,.s8,.s9{
				width: 100px;
				height: 100px;
				float: left;
				background-color: mediumslateblue;
				margin: 10px auto auto 10px;
			}

		</style>
	</head>
	<body>
		<div class="div1">
			<div class="s1">
				
			</div>
			<div class="s2">
				
			</div>
			<div class="s3">
				
			</div>
			<div class="s4">
				
			</div>
			<div class="s5">
				
			</div>
			<div class="s6">
				
			</div>
			<div class="s7">
				7
			</div>
			<div class="s8">
				8
			</div>
			<div class="s9">
				9
			</div>
		</div>
	</body>
</html>
